﻿@{
    Bundle("jquery_validate");
}

<table>
    <tr>
        <td style="min-width: 200px; vertical-align: top;">
            <fieldset class="groupbox">
                <section>
                    <script type="text/javascript">
                        jQuery(document).ready(function () {
                            jQuery('@ID("#form")').validate({
                                rules: {
                                    optionName: {
                                        required: true
                                    }
                                }
                            });
                            jQuery('@ID("#txt_option")').autocomplete({
                                source: function (request, response) {
                                    jQuery(request).prop('flagMask', 'Active,Order,Common');
                                    jQuery.post('@Html.Raw(Url.Action(Loc.Act("Autocomplete").Ctrl("SalesOption")))', request, response);
                                },
                                minLength: 3,
                                select: function (event, ui) {
                                    jQuery('@ID("#hidden_option")').val(ui.item.id);
                                }
                            });
                        });
                    </script>
                    <form id="@ID("form")" action="@Url.Action(Loc.Act("Map").Ctrl("Relation").NoArea())" method="post">
                        <input type="hidden" name="operation" value="MapSalesOptionToShoppingCart" />
                        <input type="hidden" name="returnUrl" value="@Request.RawUrl" />
                        <input type="hidden" name="entityID" value="@JDM.Int32(Model.EntityID)" />
                        <ul>
                            <li>
                                <input id="@ID("hidden_option")" type="hidden" name="childID" />
                                <input id="@ID("txt_option")" type="text" name="optionName" />
                            </li>
                        </ul>
                        <ul class="bar toolbar">
                            <li><button class="button" type="submit">@T(Res.In("Common").Of("Act").Name("Submit"))</button></li>
                        </ul>
                    </form>
                </section>
            </fieldset>
        </td>
        <td style="width: 100%; vertical-align: top;">
            <ul class="cloud">
            @foreach(var i in Model.Options)
            {
                var t_opt = (i.Translations as IEnumerable<dynamic>)
                    .SingleOrDefault(x => JDM.Int32(x.Language.EntityID) ==
                        JDM.Int32(Svc.Localization.Language.EntityID));
                <li>
                    <ul class="bar inlinebar">
                        <li><a href="@Url.Action(Loc.Act("Edit").Ctrl("SalesOption").Set(new
                        {
                            id = JDM.Int32(i.EntityID)
                        }))">&crarr;</a></li>
                        <li><a class="confirm" href="@Url.Action(Loc.Act("Unmap").Ctrl("Relation").NoArea().Set(new
                        {
                            operation = "UnmapSalesOptionFromShoppingCart",
                            returnUrl = Request.RawUrl,
                            entityID = JDM.Int32(Model.EntityID), 
                            childID = JDM.Int32(i.EntityID)
                        }))">x</a></li>
                    </ul>
                    @(t_opt != null ? String.Format("{0}: {1}", JDM.String(t_opt.Name), JDM.String(t_opt.Value)) : JDM.Int32(i.EntityID))
                </li>
            }
            </ul>
        </td>
    </tr>
</table>